<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                     <div class="decorate-square"></div>
                    <h2>汽车轨迹</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                  <card class="mb-10">
                    <div class="normal-list-page-hd clearfix ">
                      车牌号：
                      <Input v-model="queryData.name" @keyup.native="clearBlank" placeholder="请输入车牌号" class="mr-10" style="width: 200px" />
                      <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="getTableData">查询</Button>
                    </div>
                  </card>
  
                    <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                      <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"
                            @on-change="changePage" @on-page-size-change="onPageSizeChange" show-elevator show-total
                            show-sizer></Page>
                    </div>
                </div>
                <!--新建&修改地图-->
                <Modal v-model="modal.carmap.show"  :mask-closable="false" title="历史轨迹" @on-ok="mapclose"  width='1500px'>
					<!-- <div>
						选择时间：<DatePicker class="mr-10" type='date' @on-change='startTime($event)' placeholder='Select date' style='width: 200px'></DatePicker>
						<Button type="primary"  custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
					</div> -->
					<div id="cxmap">
						<cmap :routerData="routerData" v-if='hackReset==true'></cmap>
					</div>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
	import carmapApi from '@/api/RecordsCenter/carmap.js'
	import cmap from "./components/cmap.vue";
import moment from 'moment'
import { Message } from 'iview'
// import bdmap from '@/view/collection/components/bdmap.vue'

export default {
  name: 'carmap',
  components:{cmap},
  data () {
    return {
		hackReset:false,
      // 弹出层数据
	  routerData:{
		  type:'5211',
		  pointStrings:''
	  },
      modal: {
        carmap: {
		  show:false,
		  load:true,
          isShow: false,
          loading: true,
          rules: {
            name: [
              {
                required: true,
                message: '此项不能为空',
                trigger: 'blur'
              }
            ],
            url: [
              {
                required: true,
                message: '请填写URL',
                trigger: 'blur'
              }
            ]
          },
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          /** 开始自动生成 */
          { title: 'id', minWidth:120,align: 'center', key: 'id' },
          { title: '名称',minWidth:120, align: 'center', key: 'licensePlate' },

          { title: '起点经纬度',minWidth:120, align: 'center', key: 'mapEnd' },
          { title: '终点经纬度',minWidth:120, align: 'center', key: 'mapStart' },

          { title: '时间',
			minWidth:200,
            align: 'center',
            key: 'insertTime',
			render: (h, params) => {
			  return h('div', moment.unix(params.row.insertTime / 1000).format('YYYY-MM-DD HH:mm:ss'))
			}
          },
          /** 自动生成结束 */
          {
            title: '操作',
			fixed: 'right',
            align: 'center',
            minWidth:150,
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
				h(
				  'Tooltip',
				  {
				    props: {
				      placement: 'right',
				      content: '点击查看'
				    },
				    style: {
				      cursor: 'pointer'
				    }
				  },
				  [
				    h(
				      'Button',
				      {
				        props: {
				          type: 'success',
				          size: 'small'
				        },
				        style: {
				          marginRight: '5px',
				          padding: '1px 2px'
				        },
				        on: {
				          click: () => {
				            // this.showUpdateModal(params.index);
				            this.showmapModal(params.row.id)
				          }
				        }
				      },'历史轨迹'
				    )
				  ]
				),
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      },
	  // 弹出框查询轨迹
	  infolist:{
		  
	  }
    }
  },
  methods: {
    clearBlank () {
      this.queryData.name = this.queryData.name.replace(/[^\w\u4E00-\u9FA5]/g, '')
      // 不允许输入特殊符号
      this.modal.carmap.formData.name = this.modal.carmap.formData.name.replace(/[^\w\u4E00-\u9FA5]/g, '')
    },
    // 获取列表
    getTableData () {
      const that = this
      // that.queryData.totalRecord = undefined
			that.list.loading=true
      carmapApi.getPageList(that.queryData)
        .then(res => {
			console.log(res)
		  that.routerData=res.data
		  // that.routerData.time=res.data.insertTime
		 
          that.list.tableData = res.data
          that.queryData.totalRecord = res.data.totalRecord
		  that.list.loading=false
          // that.queryData.page = res.data.page;
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },
    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

	// 显示地图弹窗
	showmapModal (id) {
	  const that = this
	  
	  this.modal.carmap.show = true
	  this.hackReset = false
		this.$nextTick(() => {
			this.hackReset = true
		})
	
	},
	mapclose(){
		this.getTableData()
	}
  },

  created () {
    this.getTableData()
  }
}
</script>
<style>
	#cxmap{
		width: 1450px;
		height: 700px;
	}
</style>